/**
 * @Author: ls <ls-mac>
 * @Date:   2019-08-11 17:52:20
 * @Last modified by:   ls-mac
 * @Last modified time: 2020-04-21 13:29:45
 */

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import debounce from 'lodash/debounce';
import { routerRedux } from 'dva/router';
import {
  Alert,
  AutoComplete,
  Row,
  Col,
  Card,
  Checkbox,
  Form,
  Input,
  List,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Popover,
  Popconfirm,
  TimePicker,
  Tag,
  Table,
  Modal,
  message,
  Badge,
  Divider,
  Upload,
  Spin,
} from 'antd';
import SimpleTable from 'components/SimpleTable';
import NestedTable from 'components/NestedTable';
import StandardTable from 'components/StandardTable';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './enterprise.less';

const FormItem = Form.Item;

const { Option } = Select;

const { RangePicker } = DatePicker;

@connect(
  ({
    orderCommit,
    companyStorePage,
    familyList,
    dict,
    contractList,
    enterpriseList,
    employeeList,
    extraItemList,
    packageList,
    orderList,
    serviceList,
    institutionList,
    loading,
  }) => ({
    orderCommit,
    companyStorePage,
    enterpriseList,
    familyList,
    dict,
    extraItemList,
    contractList,
    employeeList,
    packageList,
    orderList,
    serviceList,
    institutionList,
    loading: loading.models.companyStorePage,
  })
)
@Form.create()
export default class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
  }

  state = {
    dataSource: [], // 企业名称 数据源
    result: [], // 企业名称 自动匹配结果
    companyId: '', // 企业id
    contractId: '', // 合同id
    contarctValue: '',
    employeeId: '',
    type: 'add',
    disabledDateList: [],
    expandedRowKeys: [],
    selectedRows: [],
    selectedRowsKeys: [],
    selectedExpandedRows: [],
    selectedExpandedRowsObj: {},
    data: [],
    value: [],
    fetching: false,
    storeUnavailableTimeList: '',
    provinceId: '',
    cityId: '',
    institutionId: '',
    serviceDetailIds: [],
    showMore: false,
  };

  componentDidMount() {
    const {
      dispatch,
      location: { query },
      form,
    } = this.props;

    if (query) {
      // 查询员工详情
      dispatch({
        type: 'employeeList/employeeDetail',
        payload: { id: query.id },
      });
      // 查询合同
      dispatch({
        type: 'contractList/getList',
        payload: { companyId: query.companyId },
      });

      // 查询套餐
      dispatch({
        type: 'packageList/packageList',
        payload: { contractId: query.contractId },
      });

      // 查询套餐服务
      dispatch({
        type: 'serviceList/serviceRelation',
        payload: { packageId: query.packageId },
      });

      this.setState({
        data: [{ name: query.name, id: query.id }],
        contractId: `${query.contractId}`,
        employeeId: `${query.id}`,
      });

      let id = query.id;
      const t = () => {
        form.setFieldsValue({ employeeId: `${id}` });
        this.onSelectEmployeeId(`${id}`);
      };
      setTimeout(() => {
        t();
      }, 300);
    } else {
      dispatch({
        type: 'employeeList/clearEmployeeDetail',
      });
      dispatch({
        type: 'serviceList/clearServiceRelation',
      });
      dispatch({
        type: 'orderCommit/clearExtraItemList',
      });
    }

    // // 查询套餐加项
    // dispatch({
    //   type: 'extraItemList/getExtraItemList',
    //   payload: {},
    // });

    // const {
    //   orderCommit: { extraItemList },
    // } = this.props;
    //
    // const newlist = extraItemList.map(v => {
    //   return v.key;
    // });
    //
    // this.setState({
    //   expandedRowKeys: newlist,
    // });

    // 查询公司
    dispatch({
      type: 'companyStorePage/companyList',
      payload: {
        name: '',
      },
      callback: res => {
        const newList = res.data.map(v => {
          return <Option value={v.id}>{v.name}</Option>;
        });
        this.setState({
          dataSource: newList,
          result: newList,
        });
      },
    });

    // // 查询合同
    // dispatch({
    //   type: 'contractList/getList',
    //   payload: { companyId },
    // });

    // 查询省份
    dispatch({
      type: 'dict/dictProvinceList',
      payload: {},
    });

    // 适用机构
    dispatch({
      type: 'institutionList/dictInstitutionList',
      payload: {},
    });
  }

  // 选择企业
  onSelect = v => {
    const { dispatch, form } = this.props;

    // 查询合同
    dispatch({
      type: 'contractList/getList',
      payload: { companyId: v },
    });

    this.setState({
      companyId: v,
      contarctValue: '',
    });

    form.setFieldsValue({ companyId: v });
  };

  // 选择员工姓名
  onSelectEmployeeId = value => {
    const { dispatch } = this.props;
    const { contractId, data } = this.state;

    const v = typeof value === 'object' ? value.key : value;
    // 查询家属
    dispatch({
      type: 'familyList/familyList',
      payload: { employeeId: v },
    });
    // 查询套餐
    // dispatch({
    //   type: 'packageList/orderPackageList',
    //   payload: { contractId, employeeId: v },
    // });
    this.setState({
      value: v,
      fetching: false,
      employeeId: v,
    });
  };

  onSelectFamilyId = value => {
    const { dispatch } = this.props;
    const { contractId, employeeId } = this.state;
    // 查询套餐
    // dispatch({
    //   type: 'packageList/orderPackageList',
    //   payload: { contractId, employeeId, familyId: value },
    // });

    this.setState({
      familyId: value,
    });
  };

  // 选择合同
  onChangeH = v => {
    const { dispatch } = this.props;

    this.setState({
      contractId: v,
    });

    this.fetchUser();
  };

  // 选择门店 1.查询门店不可预约时间 2.查询套餐加项
  onSelectStoreId = v => {
    const {
      dispatch,
      dict: { dictOrderPackageStoreList },
    } = this.props;
    const { contractId, packageId } = this.state;

    const newlist = dictOrderPackageStoreList.filter(item => {
      return item.id == v;
    });

    this.setState({
      storeUnavailableTimeList: newlist[0]?.storeUnavailableTimeList,
    });

    // 查询套餐加项
    dispatch({
      type: 'orderCommit/extraItemRelation',
      payload: { packageId, contractId, shopId: v },
      callback: res => {
        const { data } = res;
        if (data instanceof Array) {
          const newList = data.map(v => {
            return `k${v.id}`;
          });
          this.setState({
            expandedRowKeys: newList,
          });
        }
      },
    });

    // 查询员工
    dispatch({
      type: 'dict/dictStoreUnavailableTimeList',
      payload: { storeId: v, contractId },
      callback: res => {
        if (res.success) {
          const list = res.data.map(val => {
            let { beginDate, endDate } = val;
            if (beginDate || endDate) {
              beginDate = moment(beginDate);
              endDate = moment(endDate);
            }
            return { beginDate, endDate };
          });
          this.setState({
            disabledDateList: list,
          });
        }
      },
    });
  };

  // 选择套餐->门店
  onSelectPackageId = v => {
    const {
      dispatch,
      packageList: { orderPackageList },
    } = this.props;
    const { contractId, employeeId } = this.state;

    const list = orderPackageList.filter(val => val.id === v);

    if (list[0].ifContainRadio === '1') {
      this.setState({
        showMore: true,
      });
    } else {
      this.setState({
        showMore: false,
      });
    }

    this.setState({
      packageId: v,
    });

    // 2020-04-19 更换新接口
    // 查询套餐加项
    // dispatch({
    //   type: 'orderCommit/extraItemRelation',
    //   payload: { packageId: v, contractId },
    //   callback: res => {
    //     const { data } = res;
    //     if (data instanceof Array) {
    //       const newList = data.map(v => {
    //         return `k${v.id}`;
    //       });
    //       this.setState({
    //         expandedRowKeys: newList,
    //       });
    //     }
    //   },
    // });

    // 查询套餐服务
    dispatch({
      type: 'serviceList/serviceRelation',
      payload: { packageId: v },
    });
  };

  disabledDate = current => {};

  // 查询门店
  handleSearchForm = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'dict/dictStoreList',
        payload: { ...fieldsValue },
      });
    });
  };

  // 查询公司
  handleSearch = value => {
    const { dataSource } = this.state;
    const newList = dataSource.filter(v => v.props.children.indexOf(value) > -1);
    this.setState({ result: newList });
  };

  handleSubmit = e => {
    e.preventDefault();
    const {
      dispatch,
      form,
      orderCommit: { extraItemList },
      location: { query },
    } = this.props;

    const {
      type,
      selectedRows,
      selectedExpandedRows,
      selectedExpandedRowsObj,
      serviceDetailIds,
    } = this.state;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      // let extraItemList = [];
      //
      // for (let key in selectedExpandedRowsObj) {
      //   if (selectedExpandedRowsObj[key][0]['isClone']) {
      //     extraItemList.push({ id: key });
      //   } else {
      //     extraItemList.push({ id: key, extraItemDetailList: selectedExpandedRowsObj[key] });
      //   }
      // }
      //

      // if (fieldsValue.payStatus == '1' && !fieldsValue.payRemark) {
      //   message.warn('请填写付款信息备注');
      //   return;
      // }

      const params = {
        ...fieldsValue,
        extraItemList: selectedRows,
        serviceDetailIds,
        appointmentDate: fieldsValue.appointmentDate
          ? moment(fieldsValue.appointmentDate).format('YYYY-MM-DD')
          : '',
      };

      // const keylist = selectedExpandedRows.map(v => {
      //   return v.extraItemId;
      // });
      //
      // params.extraItemList = extraItemList.map(v => {
      //   if (keylist.indexOf(v.id) > -1) {
      //     return v;
      //   }
      // });

      dispatch({
        type: 'orderList/create',
        payload: params,
        callback: res => {
          if (res.success) {
            message.success('创建成功');
            dispatch(routerRedux.push('/Order/order-list'));
          } else {
            message.info(res.errorDesc);
          }
        },
      });
    });
  };

  handleInputChange = (e, r, n) => {
    let value = '';
    if (typeof e === 'string') {
      value = e;
    } else {
      value = e.target.value;
    }
    const { dispatch } = this.props;

    const { key } = r;
    const newobj = { ...r };
    newobj[n] = value;
    dispatch({
      type: 'employeeList/editFamilyList',
      payload: newobj,
    });
  };

  handleCancel = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/Enterprise/employee-list'));
  };

  fetchUser = value => {
    const { dispatch } = this.props;
    const { contractId } = this.state;
    this.lastFetchId += 1;
    const fetchId = this.lastFetchId;
    this.setState({ data: [], fetching: true });
    // 查询员工
    dispatch({
      type: 'employeeList/employeeList',
      payload: { contractId: contractId, employeeName: value },
      callback: res => {
        if (res.success) {
          if (fetchId !== this.lastFetchId) {
            // for fetch callback order
            return;
          }
          const { data } = res;
          let newData = data.filter(v => {
            if (v.name) return v;
          });

          this.setState({ data: newData, fetching: false });
        }
      },
    });
  };

  renderOptionsC = () => {
    const {
      dict: { cityList },
    } = this.props;
    const options = cityList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  renderOptionsI = () => {
    const {
      institutionList: { dictInstitutionList },
    } = this.props;
    const options = dictInstitutionList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  renderOptionsP = () => {
    const {
      dict: { provinceList },
    } = this.props;
    const options = provinceList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  renderOptionsPosition = () => {
    const {
      enterpriseList: { positionList },
    } = this.props;
    const options = positionList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  renderOptionsH = () => {
    const {
      contractList: { list },
    } = this.props;
    const options = list.map(v => (
      <Option key={v.id} value={v.id}>
        {v.title}
      </Option>
    ));
    return options;
  };

  renderOptionsE = () => {
    const {
      employeeList: { employeeList },
    } = this.props;
    const options = employeeList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  renderOptionsF = () => {
    const {
      familyList: { familyList },
    } = this.props;
    const options = familyList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  // 渲染套餐
  renderOptionsPackageId = () => {
    const {
      packageList: { orderPackageList },
    } = this.props;

    const options = orderPackageList.map(v => (
      <Option key={v.id} value={v.id}>
        {v.name}
      </Option>
    ));
    return options;
  };

  // 门店render
  renderOptionsStoreId = () => {
    const {
      dict: { dictOrderPackageStoreList },
    } = this.props;
    const options = dictOrderPackageStoreList.map(v => (
      <Option key={v.id} value={v.id} label={v.name}>
        {v.name}
      </Option>
    ));
    return options;
  };

  handleExpandedSelect = (rows, a, b) => {
    this.setState({
      selectedExpandedRows: rows,
    });
  };

  onChangeP = v => {
    // 查询城市
    const { dispatch } = this.props;
    const { cityId, institutionId } = this.state;
    this.setState({
      provinceId: v,
    });
    dispatch({
      type: 'dict/dictCityList',
      payload: { provinceId: v, cityId, institutionId },
    });
  };

  onChangeC = v => {
    // 查询门店
    const { dispatch } = this.props;
    const { provinceId, institutionId } = this.state;
    this.setState({
      cityId: v,
    });
    // 查询门店
    dispatch({
      type: 'dict/dictStoreList',
      payload: { cityId: v, institutionId, provinceId },
    });
  };

  onChangeI = v => {
    // 查询门店
    const { dispatch } = this.props;
    const { cityId, provinceId } = this.state;

    this.setState({
      institutionId: v,
    });
    // 查询门店
    dispatch({
      type: 'dict/dictStoreList',
      payload: { institutionId: v, cityId, provinceId },
    });
  };

  focusStore = () => {
    const { dispatch } = this.props;
    const { contractId, employeeId, packageId, cityId, institutionId, provinceId } = this.state;
    dispatch({
      type: 'dict/dictOrderPackageStoreList',
      payload: { packageId, contractId, employeeId, cityId, institutionId, provinceId },
    });
  };

  // 聚焦套餐
  focusPackage = () => {
    const { dispatch } = this.props;
    const { contractId, employeeId, familyId } = this.state;
    // 查询套餐
    dispatch({
      type: 'packageList/orderPackageList',
      payload: { contractId, employeeId, familyId },
    });
  };

  expandedRowRender = record => {
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '描述',
        dataIndex: 'description',
        align: 'center',
      },
      {
        title: '价格',
        dataIndex: 'price',
        align: 'center',
      },
    ];

    const extraItemDetailList = record.extraItemDetailList ? record.extraItemDetailList : [];
    const { loading } = this.props;
    const { selectedExpandedRows } = this.state;

    const rowSelection = {
      hideDefaultSelections: true,
      onSelect: (record, selected, selectedRows, nativeEvent) => {
        const { selectedExpandedRowsObj } = this.state;
        const extraItemId = record['extraItemId'];
        selectedExpandedRowsObj[extraItemId] = selectedRows;
        this.setState({
          selectedExpandedRowsObj,
        });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        const { selectedExpandedRowsObj } = this.state;
        const extraItemId = changeRows[0]['extraItemId'];
        selectedExpandedRowsObj[extraItemId] = selectedRows;
        this.setState({
          selectedExpandedRowsObj,
        });
      },
    };

    return extraItemDetailList.length ? (
      <Table
        rowSelection={rowSelection}
        selectedRows={selectedExpandedRows}
        onSelectRow={this.handleExpandedSelect}
        style={{ background: '#fff' }}
        loading={loading}
        rowKey="id"
        dataSource={extraItemDetailList}
        pagination={false}
        columns={columns}
      />
    ) : (
      ''
    );
  };

  handleOnExpand = (expand, record) => {
    // const { expandedRowKeys } = this.state;
    // if (!expand) {
    //   const newKeys = expandedRowKeys.filter(key => {
    //     return key !== record.key;
    //   });
    //   this.setState({ expandedRowKeys: newKeys });
    //   return;
    // }
    // this.setState({ expandedRowKeys: [...expandedRowKeys, record.key] });
  };

  handleMainSelect = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  onChangeService = (e, item) => {
    const { checked } = e.target;
    const { id } = item;
    const { serviceDetailIds } = this.state;
    let newList = [];
    if (checked) {
      newList = [...serviceDetailIds, id];
    } else {
      newList = serviceDetailIds.filter(v => v != id);
    }
    this.setState({
      serviceDetailIds: newList,
    });
  };

  render() {
    const {
      loading,
      form,
      employeeList: { detailData },
      orderCommit: { extraItemList, expandedRowKeys },
      serviceList: { serviceRelation },
      location: { query },
      children,
    } = this.props;

    const {
      result,
      contarctValue,
      selectedRows,
      fetching,
      data,
      value,
      employeeId,
      storeUnavailableTimeList,
      showMore,
    } = this.state;

    const { getFieldDecorator } = form;
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: '描述',
        dataIndex: 'description',
      },
      {
        title: '价格',
        dataIndex: 'price',
      },
      {
        title: '详情',
        dataIndex: 'attachmentUrl',
        render: (v, r) => (
          <a href={v} target="_blank">
            点击查看
          </a>
        ),
      },
    ];
    return (
      <PageHeaderLayout>
        <Card bordered={false} style={{ paddingBottom: '20px' }}>
          <Alert message="后台下单" type="info" />
          <Form layout="inline">
            <Row>
              <Col md={12} sm={24}>
                <FormItem label="企业名称">
                  {getFieldDecorator('companyId', {
                    initialValue: detailData?.companyId,
                    rules: [{ required: true, message: '请输入企业名称' }],
                  })(
                    <Select
                      showSearch
                      placeholder="输入企业名称查询"
                      style={{ width: 350 }}
                      optionFilterProp="children"
                      onChange={this.onSelect}
                      filterOption={(input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }
                    >
                      {result}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24}>
                <FormItem label="合同名称">
                  {getFieldDecorator('contractId', {
                    initialValue: detailData?.contractId,
                    rules: [{ required: true, message: '请选择合同名称' }],
                  })(
                    <Select
                      placeholder="请选择"
                      style={{ width: 350 }}
                      onSelect={this.onChangeH}
                      autoClearSearchValue
                      allowClear
                    >
                      {this.renderOptionsH()}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col md={12} sm={24}>
                <FormItem label="员工姓名">
                  {getFieldDecorator('employeeId', {
                    initialValue: '',
                    rules: [{ required: true, message: '请输入' }],
                  })(
                    <Select
                      showSearch={true}
                      placeholder="输入员工姓名查询"
                      style={{ width: 350 }}
                      notFoundContent={fetching ? <Spin size="small" /> : '没有找到数据'}
                      onSearch={this.fetchUser}
                      onSelect={this.onSelectEmployeeId}
                    >
                      {data.map(d => (
                        <Option key={d.id}>{d.name}</Option>
                      ))}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24}>
                <FormItem label="&nbsp;&nbsp;&nbsp;家属&#12288;&#12288;">
                  {getFieldDecorator('familyId', {
                    initialValue: detailData?.familyId,
                  })(
                    <Select
                      allowClear
                      placeholder="输入家属姓名查询"
                      style={{ width: 350 }}
                      onChange={this.onSelectFamilyId}
                    >
                      {this.renderOptionsF()}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col md={12} sm={24}>
                <FormItem label="套餐&#12288;&#12288;">
                  {getFieldDecorator('packageId', {
                    initialValue: detailData?.packageId,
                    rules: [{ required: true, message: '请选择套餐' }],
                  })(
                    <Select
                      onFocus={this.focusPackage}
                      onSelect={this.onSelectPackageId}
                      placeholder="请选择套餐"
                      style={{ width: 350 }}
                    >
                      {this.renderOptionsPackageId()}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={{ lg: 24 }}>
              <Col md={6} sm={24}>
                <FormItem>
                  <span>&#12288;选择省份：</span>
                  <Select
                    showSearch
                    allowClear={true}
                    onSelect={this.onChangeP}
                    placeholder="请选择"
                    style={{ width: 120 }}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {this.renderOptionsP()}
                  </Select>
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem>
                  <span>选择城市：</span>
                  <Select
                    showSearch
                    allowClear
                    onSelect={this.onChangeC}
                    placeholder="请选择"
                    style={{ width: 120 }}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {this.renderOptionsC()}
                  </Select>
                </FormItem>
              </Col>
              <Col md={12} sm={24}>
                <FormItem>
                  <span>选择机构：</span>
                  <Select
                    showSearch
                    allowClear
                    onSelect={this.onChangeI}
                    placeholder="请选择"
                    style={{ width: 160 }}
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {this.renderOptionsI()}
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col md={12} sm={24}>
                <FormItem label="选择门店">
                  {getFieldDecorator('storeId', {
                    initialValue: detailData?.storeId,
                    rules: [{ required: true, message: '请选择门店' }],
                  })(
                    <Select
                      onFocus={this.focusStore}
                      showSearch
                      onSelect={this.onSelectStoreId}
                      placeholder="请选择门店"
                      style={{ width: 350 }}
                      optionFilterProp="label"
                    >
                      {this.renderOptionsStoreId()}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={12} sm={24}>
                <FormItem label="预约时间">
                  {getFieldDecorator('appointmentDate', {
                    rules: [{ required: true, message: '请输入' }],
                  })(<DatePicker format="YYYY-MM-DD" tyle={{ width: 350 }} />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col md={12} sm={24}>
                &nbsp;
              </Col>
              <Col md={12} sm={24}>
                {storeUnavailableTimeList
                  ? storeUnavailableTimeList.map(v => (
                      <p style={{ color: 'red' }}>
                        {v.beginDate} ~ {v.endDate}
                      </p>
                    ))
                  : ''}
              </Col>
            </Row>
            <Row gutter={{ lg: 24 }}>
              <Col md={6} sm={24}>
                <FormItem label="付款状态">
                  {getFieldDecorator('payStatus', {
                    initialValue: detailData?.payStatus,
                    rules: [{ required: true, message: '请选择付款状态' }],
                  })(
                    <Select onSelect={this.onChangeP} placeholder="请选择" style={{ width: 120 }}>
                      <Option key="0" value="0">
                        未支付
                      </Option>
                      <Option key="1" value="1">
                        支付成功
                      </Option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem label="是否发短信">
                  {getFieldDecorator('ifSendMessage', {
                    initialValue: detailData?.ifSendMessage,
                    rules: [{ required: true, message: '请选择是否发短信' }],
                  })(
                    <Select placeholder="请选择" style={{ width: 120 }}>
                      <Option key="0" value="0">
                        否
                      </Option>
                      <Option key="1" value="1">
                        是
                      </Option>
                    </Select>
                  )}
                </FormItem>
              </Col>

              {showMore ? (
                <Col md={6} sm={24}>
                  <FormItem label="是否做放射性检查项目">
                    {getFieldDecorator('ifAcceptRadio', {
                      initialValue: detailData?.ifAcceptRadio,
                      rules: [{ required: true, message: 'ifAcceptRadio' }],
                    })(
                      <Select onSelect={this.onChangeP} placeholder="请选择" style={{ width: 120 }}>
                        <Option key="1" value="1">
                          是
                        </Option>
                        <Option key="2" value="2">
                          否
                        </Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              ) : (
                ''
              )}
            </Row>
            <Row gutter={{ lg: 24 }}>
              <Col md={12} sm={24}>
                <FormItem label="付款信息备注">
                  {getFieldDecorator('payRemark', {
                    initialValue: detailData?.payRemark,
                  })(<Input.TextArea style={{ width: '240px' }} />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
          <Alert message="套餐加项" type="info" style={{ marginBottom: 10, marginTop: 10 }} />
          <SimpleTable
            selectedRows={selectedRows}
            onSelectRow={this.handleMainSelect}
            loading={loading}
            data={{ list: extraItemList, pagination: false }}
            columns={columns}
            onChange=""
            rowKey="key"
          />
          <Alert message="套餐服务" type="info" style={{ marginBottom: 10, marginTop: 10 }} />
          {serviceRelation
            ? serviceRelation.map(v => {
                return (
                  <List
                    header={
                      <div>
                        {v.name} ({v.description})
                      </div>
                    }
                    bordered
                    dataSource={v.serviceDetailList}
                    renderItem={item => (
                      <List.Item
                        actions={[
                          <a href={item.attachmentUrl} target="_blank">
                            查看详情
                          </a>,
                        ]}
                      >
                        <Checkbox onChange={e => this.onChangeService(e, item)}>
                          {item.name}
                        </Checkbox>
                      </List.Item>
                    )}
                    className={styles.listContainer}
                  />
                );
              })
            : ''}
        </Card>
        <div style={{ textAlign: 'center' }}>
          <Button type="primary" style={{ marginRight: 20 }} onClick={this.handleSubmit}>
            提交
          </Button>
          <Button type="" onClick={this.handleCancel}>
            返回
          </Button>
        </div>
      </PageHeaderLayout>
    );
  }
}
